<template>
  <div style="background-color:#417EB7">
  <el-row >
    <el-col :span="24"><div class="grid-content bg-purple-light d-flex align-items-center">
      <i class="el-icon-success"  style="margin-left: 10px;color: #2ac06d" ></i>
      <span style="color: deepskyblue;margin-left: 20px">机车列表</span>
      <i class="el-icon-arrow-down" style="margin-left: auto; margin-right: 10px; color: #c0ccda" ></i>
    </div></el-col>
  </el-row>
  <div style="background-color:#417EB7">
    <div
      v-for="item in items"
      :key="item.id"
      class="item"
      :class="{ 'is-selected': selectedItem === item }"
      style="background-color:#285B92"
      @click="toggleSelect(item)"
    >
      <div class="item-icon">
        <i v-if="item.selected" class="el-icon-check" />
      </div>
      <div class="item-content">
        <h3 class="item-title" :style="{ color: getColorByStatus(item.status) }">{{ item.content }}</h3>
      </div>
    </div>
    <div v-if="loading" class="loading">加载中...</div>
    <el-button
      v-if="!noMore && !loading"
      class="load-more-button"
      type="primary"
      @click="loadMore"
    >
      加载更多
    </el-button>
  </div>
  </div>
</template>

<script>
export default {
  name: 'TrainList',
  data() {
    return {
      pageSize: 5, // 每页加载的项目数量
      page: 1, // 当前页数
      loading: false,
      items: [
        { id: 1, content: 'HXD2-1497B', selected: false, status: 'active' },
        { id: 2, content: 'HXD1-1122A', selected: false, status: 'active' },
        { id: 3, content: 'HXD1C-3102', selected: false, status: 'inactive' },
        { id: 4, content: 'HXD1-1123B', selected: false, status: 'inactive' }
      ],
      selectedItem: null
    }
  },
  computed: {
    noMore() {
      // 假设总项目数量是已知的，这里用1000作为示例
      return this.items.length >= 1000
    }
  },
  mounted() {
    this.loadMore()
    this.$nextTick(() => {
      setInterval(this.loadMore, 10000)
    })
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    loadMore() {
      if (this.noMore || this.loading) return
      this.loading = true
      // 模拟从服务器获取数据
      setTimeout(() => {
        const newItems = Array.from({ length: this.pageSize }, (_, i) => ({
          id: this.items.length + i + 1,
          content: `New Item ${this.items.length + i + 1}`,
          selected: false,
          status: i % 2 === 0 ? 'active' : 'inactive'
        }))

        this.items = [...this.items, ...newItems]
        this.page++
        this.loading = false
      }, 1000)
    },
    toggleSelect(item) {
      if (this.selectedItem === item) {
        this.selectedItem = null
        item.selected = false
      } else {
        if (this.selectedItem) {
          this.selectedItem.selected = false
        }
        this.selectedItem = item
        item.selected = true
      }
    },
    getColorByStatus(status) {
      const statusColors = {
        active: 'lightgreen',
        inactive: 'lightcoral'
      }
      return statusColors[status] || '#f5f7fa'
    }
  }
}
</script>

<style scoped>
.train-list {
  padding: 20px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  margin-left: 30px;
  margin-bottom: 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease, border-left-color 0.3s ease;
  cursor: pointer;
}

.item-icon {
  margin-right: 10px;
  color: #FFFFFF;
}

.item-content {
  flex: 1;
}

.item-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.item-subtitle {
  font-size: 14px;
  color: #666;
  margin: 5px 0 0 0;
}

.item:hover {
  background-color: #f0f9eb;
}

.item.is-selected {
  background-color: #FFFFFF;
  border-left: 4px solid #FFFFFF;
}

.loading {
  text-align: center;
  padding: 10px;
  color: #999;
}

.load-more-button {
  margin-top: 10px;
  width: 100%; /* Ensure the button spans the full width of the card */
  display: block; /* Make the button a block element to span the full width */
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #F3F3F3;
}
.grid-content {
  margin-top: 10px;

  min-height: 26px;
}

/* 添加flex布局样式 */
.d-flex {
  display: flex;
}

/* 水平居中对齐 */
.align-items-center {
  align-items: center;
}
</style>

